<template>
	<view class="content">
		<!-- 头部： -->
		<view class="header">
			<view class="img flexbetween">
				<!-- 未登录： -->
				<view class="flexleft header_left" v-if="!is_login" @click="login">
					<view class="img_a">
						<image src="../../static/logo.png" mode=""></image>
					</view>
					<view class="header_wenzi">
						<view class="name">去登录</view>
					</view>
				</view>
				<!-- 已登录： -->
				<view class="flexleft header_left" v-if="is_login">
					<view class="img_a">
						<image :src="userinfo.avatar_text" mode=""></image>
					</view>
					<view class="header_wenzi">
						<view class="name">{{userinfo.nickname}}</view>
						<view class="header_phone flexleft">{{userinfo.mobile}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商城订单： -->
		<view class="nav">
			<!-- 顶部标题： -->
			<view class="nav_a flexbetween">
				<!-- <view class="nav_my">商城订单</view> -->
				<view class="nav_my">农产品订单</view>
				<view class="flexleft" @click.stop="toShopOrders(0)">
					<view class="look">查看全部订单</view>
					<view class="right_icon"></view>
				</view>
			</view>
			<!--  -->
			<view class="nav_a flexbetween">
				<view class="fukuan_a" @click="toShopOrders(1)">
					<image src="@/static/images/my/daifukuan.png" mode="" class="me_dingdan"></image>
					<view class="nav_text">待付款</view>
				</view>
				<view class="fukuan_a" @click="toShopOrders(2)">
					<image src="@/static/images/my/daifahuo.png" mode="" class="me_dingdan"></image>
					<view class="nav_text">待发货</view>
				</view>
				<view class="fukuan_a" @click="toShopOrders(3)">
					<image src="@/static/images/my/yiwancheng.png" mode="" class="me_dingdan"></image>
					<view class="nav_text">待收货</view>
				</view>
				<view class="fukuan_a" @click="toShopOrders(4)">
					<image src="@/static/images/my/yiwancheng.png" mode="" class="me_dingdan"></image>
					<view class="nav_text">已完成</view>
				</view>
			</view>
		</view>

		<!-- 余额： -->
		<view class="section flexleft">
			<view class="section_left" @click.stop="jumpqb()">
				<view class="left_img"></view>
				<view class="flexbetween section_center">
					<view class="qian" v-if="!is_login">0</view>
					<view class="qian" v-if="is_login">{{userinfo.money}}</view>
					<view class="yue">余额</view>
				</view>
			</view>
			<view class="section_right" @click.stop="jumpJf()">
				<view class="right_img"></view>
				<view class="flexbetween section_center">
					<view class="qian" v-if="!is_login">0</view>
					<view class="qian" v-else>{{userinfo.score}}</view>
					<view class="yue">积分</view>
				</view>
			</view>
		</view>

		<!-- 下方列表： -->
		<view class="center">
			<view class="center_a flexbetween" @click="toHotelBook()">
				<view class="flexleft">
					<view class="yuding"></view>
					<view class="title">酒店预订订单</view>
				</view>
				<view class="right_icon"></view>
			</view>
			<view class="center_a flexbetween" @click="toScenicOrder()">
				<view class="flexleft">
					<view class="menpiao"></view>
					<view class="title">景区门票订单</view>
				</view>
				<view class="right_icon"></view>
			</view>
			<view class="center_a flexbetween" @click="yaoQing()">
				<view class="flexleft">
					<view class="yaoqinghaoyou"></view>
					<view class="title">邀请好友</view>
				</view>
				<view class="right_icon"></view>
			</view>
			<view class="center_a flexbetween" @click="toRecords()">
				<view class="flexleft">
					<view class="hexiao"></view>
					<view class="title">核销记录</view>
				</view>
				<view class="right_icon"></view>
			</view>
			<button open-type="contact" class="center_a"
				style="border-radius: 0;display: flex;align-items: center;justify-content: space-between;">
				<view class="flexleft">
					<view class="lianxi"></view>
					<view class="title">联系客服</view>
				</view>
				<view class="right_icon"></view>
			</button>
			<!-- <view class="center_a flexbetween">
				
			</view> -->
			<view class="center_a flexbetween" @click="set()">
				<view class="flexleft">
					<view class="shezhi"></view>
					<view class="title">设置</view>
				</view>
				<view class="right_icon"></view>
			</view>
		</view>

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				is_login: true,
				userinfo: null
			};
		},
		onShow() {
			if (httpRequest.checkIsLogin()) {
				this.getinfo()
			}else{
				httpRequest.doLogin();
			}
			this.is_login = httpRequest.checkIsLogin();
			console.log(this.is_login)
		},
		methods: {
			onShareAppMessage(res) {
				let path = '/pages/hotel/jiudian';
				if (uni.getStorageSync('user_id')) {
					path = '/pages/hotel/jiudian?referee_id=' + uni.getStorageSync('user_id');
				}
				return {
					title: '季忆水雲乡',
					path: path,
					// imageUrl:'../../static/person_img.png'

				}
			},
			onShareTimeline(res) {
				let path = '/pages/hotel/jiudian';
				if (uni.getStorageSync('user_id')) {
					path = '/pages/hotel/jiudian?referee_id=' + uni.getStorageSync('user_id');
				}
				return {
					title: '季忆水雲乡',
					path: path,
					// imageUrl:'../../static/person_img.png'

				}
			},
			getinfo() {
				httpRequest.request('api/user/index', 'GET', {}, false, false, true).then(res => {
					this.userinfo = res.data
				})
			},
			login() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			jumpqb() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				} else {
					uni.navigateTo({
						url: "/pages/my/yue"
					})
				}
			},
			jumpJf() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				} else {
					uni.navigateTo({
						url: "/pages/my/cent?cent=" + this.userinfo.score
					})
				}
			},
			set() {
				uni.navigateTo({
					url: '/pages/my/set'
				})
			},
			toHotelBook() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				} else {
					uni.navigateTo({
						url: '/pages/my/jiudianyddd'
					})
				}
			},
			toScenicOrder() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				} else {
					uni.navigateTo({
						url: '/pages/my/jingqumpjd'
					})
				}
			},
			yaoQing() {
				let _this = this
				let date = {
					avatar: _this.userinfo.avatar,
					nicheng: _this.userinfo.nickname,
					yaoqingma: _this.userinfo.invite_code,
					erweima: _this.userinfo.invitation_image_text
				}
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				} else {
					uni.navigateTo({
						url: '/pages/my/yaoqinghyou?msg=' + encodeURIComponent(JSON.stringify(date))
					})
				}
			},
			toRecords() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				} else {
					uni.navigateTo({
						url: '/pages/my/hexiaojl'
					})
				}
			},
			toShopOrders(itemindex) {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				} else {
					uni.navigateTo({
						url: '/pages/my/shangchengdd?itemindex=' + itemindex
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	button {
		margin: unset;
		height: 100rpx;
		padding: unset;
		background-color: #fff;
	}

	button:after {
		border: unset;
	}

	.content {
		background-color: #fafafa;
		min-height: 100vh;
		// padding-bottom: 30rpx;
	}

	// 头部：
	.img {
		background-image: url('../../static/images/my/my-bg.png');
		width: 750rpx;
		height: 440rpx;
		background-size: 100% 100%;
	}

	.flexleft {
		display: flex;
		align-items: center;
	}

	.header_left {
		padding-left: 40rpx;
	}

	.img_a {
		border-radius: 50%;
		width: 110rpx;
		height: 110rpx;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.header_wenzi {
		margin-left: 30rpx;
		color: #333333;
	}

	.name {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.header_phone {
		margin-top: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	// 商城订单：
	.nav {
		position: absolute;
		top: 290rpx;
		width: 92%;
		box-sizing: border-box;
		margin: 30rpx;
		padding: 22rpx 35rpx;
		background-color: #fff;
		border-radius: 14rpx;
	}

	.nav_a {
		padding: 22rpx 0rpx 22rpx 0rpx;
	}

	.nav_my {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.look {
		margin-right: 7rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.fukuan_a {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.me_dingdan {
		width: 47rpx;
		height: 45rpx;
		background-size: 100% 100%;
	}

	.nav_text {
		margin-top: 21rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	// 余额：
	.section {
		margin-left: 30rpx;
		margin-top: 162rpx;
	}

	.section_left {
		background-image: url('/static/images/my/money_left.png');
		width: 337rpx;
		height: 113rpx;
		background-size: 100% 100%;
	}

	.section_right {
		background-image: url('/static/images/my/money_right.png');
		width: 337rpx;
		height: 113rpx;
		background-size: 100% 100%;
		margin-left: 20rpx;
	}

	.left_img {
		background-image: url('/static/images/my/money_left_left.png');
		width: 114rpx;
		height: 48rpx;
		background-size: 100% 100%;
		position: absolute;
		left: 230rpx;
		top: 630rpx;
	}

	.right_img {
		background-image: url('/static/images/my/money_right_right.png');
		width: 114rpx;
		height: 48rpx;
		background-size: 100% 100%;
		position: absolute;
		left: 590rpx;
		top: 630rpx;
	}

	.section_center {
		padding: 32rpx 70rpx 30rpx 30rpx;
	}

	.qian {
		font-size: 36rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: #00BA97;
	}

	.yue {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #2DBAD0;
		z-index: 1;
	}

	// 下方列表：
	.center {
		margin: 30rpx;
		padding: 0 35rpx;
		background-color: #fff;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.center_a {
		border-bottom: 1rpx solid #fcfcfc;
		border-top: 1rpx solid #fcfcfc;
	}

	.title {
		margin: 30rpx 20rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.yuding {
		width: 41rpx;
		height: 41rpx;
		background-size: 100% 100%;
		background-image: url('@/static/images/my/jiudianyuding.png');
	}

	.menpiao {
		width: 41rpx;
		height: 41rpx;
		background-size: 100% 100%;
		background-image: url('@/static/images/my/jingqumenpiao.png');
	}

	.yaoqinghaoyou {
		width: 41rpx;
		height: 41rpx;
		background-size: 100% 100%;
		background-image: url('@/static/images/my/yaoqing.png');
	}

	.hexiao {
		width: 41rpx;
		height: 41rpx;
		background-size: 100% 100%;
		background-image: url('@/static/images/my/hexiaojilu.png');
	}

	.lianxi {
		width: 41rpx;
		height: 41rpx;
		background-size: 100% 100%;
		background-image: url('@/static/images/my/lianxikefu.png');
	}

	.shezhi {
		width: 41rpx;
		height: 41rpx;
		background-size: 100% 100%;
		background-image: url('@/static/images/my/me_set.png');
	}
</style>